import React, { forwardRef } from 'react';
import StatusBar from '../status-bar/status-bar';
import DirectionCount from '../direction-count/direction-count';
import TitleHeader from '../title-header/title-header';
import DualBarChart from '../dual-bar-chart/dual-bar-chart';
import ThreeDPieChart from '../three-d-pie-chart/three-d-pie-chart';
import FirePieChart from '../fire-pie-chart/fire-pie-chart';
import './index.scss';

export interface FireStatusProps {
  className?: string;
  style?: React.CSSProperties;
  width?: number | string;
  height?: number | string;
  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;
  /**
   * 状态栏配置
   */
  statusBar?: {
    chineseText?: string;
    englishText?: string;
    theme?: 'dark' | 'light';
  };
  /**
   * 方向统计配置
   */
  directionCount?: {
    data?: Array<{
      direction?: string;
      count?: number;
      unit?: string;
    }>;
  };
  /**
   * 第一个标题配置
   */
  firstTitle?: {
    title?: string;
  };
  /**
   * 双柱状图配置
   */
  dualBarChart?: {
    data?: any[];
    config?: any;
  };
  /**
   * 第二个标题配置
   */
  secondTitle?: {
    title?: string;
  };
  /**
   * 3D饼图配置
   */
  threeDPieChart?: {
    data?: any[];
    config?: any;
  };
  /**
   * 第三个标题配置
   */
  thirdTitle?: {
    title?: string;
  };
  /**
   * 消防设备饼图配置
   */
  firePieChart?: {
    data?: any[];
    config?: any;
  };
  /**
   * 组件ID
   */
  componentId?: string;

  __designMode?: boolean;
}

const FireStatus = forwardRef<HTMLDivElement, FireStatusProps>(({
  className = '',
  style = {},
  width,
  height,
  noResponsiveScale = true,
  statusBar = {},
  directionCount = {},
  firstTitle = {},
  dualBarChart = {},
  secondTitle = {},
  threeDPieChart = {},
  thirdTitle = {},
  firePieChart = {},
  componentId,
  __designMode,
  ...otherProps
}, ref) => {
  const combinedClassName = `fire-status ${className}`.trim();
  const customStyle: React.CSSProperties = { ...style };

  // 只在设计模式下应用宽高属性，避免覆盖CSS缩放
  if (__designMode && width) {
    customStyle.width = typeof width === 'number' ? `${width}px` : width;
  }
  if (__designMode && height) {
    customStyle.height = typeof height === 'number' ? `${height}px` : height;
  }

  // 构建类名，包含响应式缩放控制
  const finalClassName = [
    combinedClassName,
    noResponsiveScale ? 'no-responsive-scale' : ''
  ].filter(Boolean).join(' ');

  return (
    <div 
      ref={ref} 
      className={finalClassName} 
      style={customStyle}
      id={componentId}
      {...otherProps}
    >
      {/* 状态栏 */}
      <div className="fire-status-section">
        <StatusBar
          chineseText={statusBar.chineseText || "消防现状"}
          englishText={statusBar.englishText || "FIRE STATUS"}
          theme={statusBar.theme || 'dark'}
          style={{ width: 500 }}
        />
      </div>
      <div className="fire-status-background">
      {/* 方向统计 */}
      <div className="fire-status-section">
        <DirectionCount
          data={[
            { name: '设备报警', value: 20 },
            { name: '人品报警', value: 20 },
            { name: '119联动', value: 20 }
          ]}
          colorScheme={['#FF6F64', '#5AF3B8', '#93DBFF', '#FFD982']}
          style={{ width: 500,height:268}}
        />
      </div>

      {/* 第一个标题 */}
      <div className="fire-status-section">
        <TitleHeader
          title={firstTitle.title || "设备分布统计"}
          style={{ width: 500 }}
        />
      </div>

      {/* 双柱状图 */}
      <div className="fire-status-section">
        <DualBarChart
          style={{ width: 500 }}
        />
      </div>

      {/* 第二个标题 */}
      <div className="fire-status-section">
        <TitleHeader
          title={secondTitle.title || "设备类型分析"}
          style={{ width: 500 }}
        />
      </div>

      {/* 3D饼图 */}
      <div className="fire-status-section">
        <ThreeDPieChart
          data={[
            { name: '喷淋', value: 320 },
            { name: '烟感/温感', value: 280 },
            { name: '应急灯', value: 180 },
            { name: '消防栓', value: 150 }
          ]}
          colorScheme={['#93DBFF', '#5AF3B8', '#FF6F64', '#FFD982']}
          style={{ width: 500,height:175 }}
        />
      </div>

      {/* 第三个标题 */}
      <div className="fire-status-section">
        <TitleHeader
          title={thirdTitle.title || "消防设备详情"}
          style={{ width: 500 }}
        />
      </div>

      {/* 消防设备饼图 */}
      <div className="fire-status-section">
        <FirePieChart
          data={[
            { name: '喷淋', value: 320, color: '#93DBFF' },
            { name: '烟感/温感', value: 280, color: '#5AF3B8' },
            { name: '应急灯', value: 180, color: '#FF6F64' },
            { name: '消防栓', value: 150, color: '#FFD982' },
            { name: '喇叭', value: 120, color: '#2297FF' },
            { name: '安全疏散指示灯', value: 156, color: '#4D74FF' }
          ]}
          totalValue={1206}
          style={{ width: 500,height:240 }}
        />
      </div>
      </div>
    </div>
  );
});

export default FireStatus; 